import createDOM from '@antv/dom-util/lib/create-dom';

/**
 * 添加class
 * @param {*} ele dom元素
 * @param {*} name  class名
 */
const addClass = function(ele, name){
    let className = ele.getAttribute("class") + " "
    className += name
    ele.setAttribute('class', className)
}
/**
 * 删除class
 * @param {*} ele  dom元素
 * @param {*} name  class名
 */
const removeClass = function(ele, name){
    let className = ele.getAttribute('class').split(' ')
    className = className.filter(i => i !== name)
    ele.setAttribute("class", className.join(" "))
}

/**
 * 根据menu返回二级菜单dom
 * @param {}} menu  菜单
 * @param {*} start  起始角度
 */
const getSubMenu = (menu, start = 0) => {
    if(!(menu instanceof Array && menu.length > 0)){
        return
    }
    // 按照二级有10个计算每份宽度
    let count = 10
    const liDeg = function(i){
        return start + 360/count*i
    }
    let wrap = createDOM('<div class="ul2"></div>')
    let $ul = createDOM('<ul class="ul-wrap clearfix"></ul>')
    // rotate的角度
    let unskewDeg = - ( 90 - 360/count/2)
    // skew的角度
    let skewDeg = 90 - 360/count
    menu.forEach((item, index) => {
        let $li = createDOM(`<li style="transform: rotate(${liDeg(index)}deg) skew(${skewDeg}deg)"></li>`)
        $li.innerHTML = `<a style="transform: skew(-${skewDeg}deg) rotate(${unskewDeg}deg)">
                            <div class="horizontal" style="transform: rotate(${- (liDeg(index) + unskewDeg)}deg)">
                                <span>icon</span>
                                <span>${item.title || '无'}</span>
                            </div>
                        </a>`
        if(item.handleClick && item.handleClick instanceof Function){
            $li.addEventListener('click', (e) => {
                item.handleClick(e)
            })
        }
        $ul.appendChild($li)
    })
    wrap.appendChild($ul)
    return wrap
}

/**
 * 根据menu生成菜单dom
 * @param {*} menu 
 */
export const getMenu = (menu) => {
    if(!(menu instanceof Array && menu.length > 0)){
        return
    }
    // 延迟隐藏菜单
    let delayHide = null
    // 延迟显示菜单
    let delayShow = null
    // 一级菜单的宽度根据菜单长度计算 
    let count = menu.length
    const liDeg = function(i){
        return 360/count*i
    }
    // 最外层
    let content = createDOM(`<div class="menu-wrap"></div>`)
    // 一级菜单wrap
    let wrap = createDOM(`<div id="ulWrap"></div>`)
    let $ul = createDOM('<ul class="ul-wrap"></ul>')
    let unskewDeg = - ( 90 - 360/count/2)
    let skewDeg = 90 - 360/count
    let subMenu = []
    menu.forEach((item, index) => {
        const $li = createDOM(`<li style="transform: rotate(${liDeg(index)}deg) skew(${skewDeg}deg)"></li>`)
        const $a = createDOM(`<a style="transform: skew(-${skewDeg}deg) rotate(${unskewDeg}deg)"></a>`)
        $a.innerHTML = `<div class="horizontal" style="transform: rotate(${- (liDeg(index) + unskewDeg)}deg)">
                            <span>icon</span>
                            <span>${item.title || '无'}</span>
                        </div>`
        $li.appendChild($a)
        if(item.handleClick && item.handleClick instanceof Function){
            $a.addEventListener('click', (e) => {
                item.handleClick(e)
            })
        }
        if(item.subMenu && item.subMenu instanceof Array && item.subMenu.length > 0){
            // 计算二级菜单的起始角度
            let start = liDeg(index) - 360/count*0.618*item.subMenu.length/2 + 360/count/2
            // 获取二级菜单
            let subMenuStr = getSubMenu(item.subMenu, start)
            // 一级菜单移入显示二级
            $a.addEventListener('mouseenter', function(){
                delayShow = setTimeout(function(){
                    addClass(subMenuStr, 'opened-nav')
                }, 150)
            })
            // 一级菜单移出隐藏二级
            $a.addEventListener('mouseleave', function(){
                delayHide = setTimeout(function(){
                    removeClass(subMenuStr, 'opened-nav')
                }, 500)
            })
            // 二级菜单移入
            subMenuStr.addEventListener('mouseenter', function(e){
                e.stopPropagation()
                clearTimeout(delayShow);
                clearTimeout(delayHide);
            })
            // 二级菜单移出
            subMenuStr.addEventListener('mouseleave', function(e){
                e.stopPropagation()
                removeClass(subMenuStr, 'opened-nav')
            })
            subMenu.push(subMenuStr)
        }
        $ul.appendChild($li)
       

    })
    wrap.appendChild($ul)
    
    // 最外层容器加入二级菜单
    if(subMenu.length > 0){
        subMenu.forEach(i => {
            content.appendChild(i)
        })
    }

    content.appendChild(wrap)

    return content
}